import React, { Component } from 'react'
import Taro,{Current} from "@tarojs/taro"
import { View } from '@tarojs/components'
import { AtList,AtDivider } from "taro-ui"
import {TipsDivider} from '../../../components/common/TipsDivider'
import {DoctorItemPlus} from '../../../components/view/DoctorItemPlus'
import {api_get_department_doctors} from '../../../utils/api'
import './selectByDept.scss'

export default class selectByDept extends Component {

  constructor(){
    super(...arguments)
    this.state = {
      loading:false,
      getting:true,
      data:'',
      allNum:0,
      showNum:10
    }
  }

  componentWillMount(){
    // 界面传参
    this.setState({
      department:Current.router.params.department,
      getting:true
    })
    // 加载数据
    Taro.showLoading({
      title: '加载中',
    })
  }

    
  myRequest =  () => {
    const params = {
      url: api_get_department_doctors,
      data: {
        department:this.state.department
      },
      method: 'POST',
      header: {'content-type': 'application/x-www-form-urlencoded'},
      success: (res) => {
        this.setState({
          data:res.data,
          allNum:res.data.length,
          loading:true
        })  
      },
      fail: (res) => {console.log(res.data)}
    }
    Taro.request(params)
  }

  showMore = (num) =>{
    if (num<this.state.allNum-10) {
      this.setState({showNum:num+10})
    }else{
      this.setState({showNum:this.state.allNum})
    }
  }

  render () {
    if(!this.state.loading){
      this.myRequest()
    }

    if(this.state.loading ){
      setTimeout(function () {Taro.hideLoading()}, 100)
    }
    return (
      this.state.loading?
      <View className='selectDoctor'>
         <AtList className='things' hasBorder={false}>
        {
          this.state.data.slice(0,this.state.showNum).map(
            (item) => {    
              return(
                <DoctorItemPlus name={item.name} doctor_id={item.doctor_id}
                     name_level={item.name_level} introduction={item.introduction}
                    status={item.status?'http://39.106.116.133:8080/images/others/reserve.png':''} picture={item.picture}
                    order_count={item.order_count} satis_rate={item.satis_rate}>
                </DoctorItemPlus>
              )
            }
          )
        }
        </AtList>
        {
          this.state.allNum>this.state.showNum?
            <View onClick={this.showMore.bind(this,this.state.showNum)} className='divider'>
              <AtDivider content='点击查看更多' fontColor='#d7d7d7'/>
            </View>
          :<TipsDivider/>
        }
      </View>
      :<View></View>
    )
  }
}
